<template>
	<view class="layout" style="padding: 20rpx; height: 100%; overflow-y: auto;">
		<view class="big_logo juzhong">
			<img class="small_logo" src="../../static/exchange/gift.png" alt="" />
		</view>
		<view class="juzhong">
			<view class="input juzhong" style="margin-bottom: 20rpx;">
				<input  class="small_input" v-model="redeemCode" type="text" placeholder="请输入18位兑换码"/>
			</view>
		</view>
		<view class="title" style="margin: 40rpx auto;">
			<view class="small_title">
				使用说明
			</view>
			<ul class="tips" style="list-style-type: disc; padding: 10rpx;">
				<!-- <view class="dot">•</view> -->
				<view class="content flex">{{content[0]}}</view>
				<view class="content flex">{{content[1]}}</view>
				<view class="content flex">{{content[2]}}</view>
				<view class="content flex">{{content[3]}}</view>
			</ul>
		</view>
		<view class=" juzhong" style="border-radius: 4px; background: rgba(110, 88, 170, 0.2); height: 140rpx; width: 610rpx; margin: 44rpx auto; ">
			<view class="" style="margin-bottom: 28rpx;">
				<img class="attention" src="../../static/exchange/attention.png" alt="" />
			</view>
			<view class="bottom_tips" style="">
				{{bottom_tips}}
			</view>
		</view>
		
		<view class="juzhong" style="margin-top: 30rpx; " >
			<view class="exchange_button juzhong" @click="exchange_request">立即兑换</view>
		</view>
		<button open-type="contact" class="juzhong last_question" style="background: transparent;">
			遇到问题？联系客服
		</button>
		
	</view>
	</view>
	
</template>

<script>
	import request from '../../apis/exchange.js';
	export default {
		data() {
			return {
				content:[
					'•一个兑换码仅可使用一次。',
					'•兑换码仅包含会员特权，不包含手机支架、专家指导服务等赠品。',
					'•兑换码的所有权归本公司所有，用户仅获得使用权。不得出售、转让或分享给他人。',
					'•如有疑问，请联系客服。',
				],
				redeemCode:'',
				bottom_tips:'请确保输入正确的兑换码。兑换码一经使用，将无法撤销。',
			}
		},
		methods: {
			async exchange_request(){
				try {
					const res = await request.exchange_code({redeemCode: String(this.redeemCode)});  
					  if (res.data.message==='兑换成功'){
						  uni.showModal({
							title: '兑换成功',
							showCancel: false,
							confirmText: '确定',
						  });
					  }else if (res.data.message==='兑换码错误'){
						  uni.showModal({
							title: '兑换码错误或已使用',
							showCancel: false,
							confirmText: '确定',
						  });
					  }

					
				} catch (error) {
					console.error('兑换码请求失败:', error);
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				}
			},
			


		}
	}
</script>

<style>
.input{
	width: 610rpx;
	height: 90rpx;
	opacity: 1;
	border-radius: 16rpx;
	border: 1px solid rgba(124, 124, 126, 0.2);
}
.last_question{
	margin-top: 6rpx;
	/** 文本1 */
	font-size: 20rpx;
	font-weight: 400;
	letter-spacing: 0px;
	line-height: 26rpx;
	color: rgba(110, 88, 170, 1);
}
.bottom_tips{
	/** 文本1 */
	font-size: 32rpx;
	font-weight: 400;
	letter-spacing: 0px;
	line-height: 42rpx;
	color: rgba(110, 88, 170, 1);
	text-align: left;
}
.attention{
	width: 60rpx;
	height:60rpx;
}
.small_title{
	/** 文本1 */
	font-size: 36rpx;
	font-weight: 400;
	letter-spacing: 0px;
	line-height: 46.8rpx;
	color: rgba(0, 0, 0, 1);
}
.small_input{
	width: 550rpx;
	/** 文本1 */
	font-size: 36rpx;
	font-weight: 400;
	letter-spacing: 0px;
	line-height: 46.8px;
	color: rgba(124, 124, 126, 0.6);
	text-align: left;
}
.exchange_button{
	width: 540rpx;
	height: 96rpx;
	opacity: 1;
	border-radius: 8rpx;
	background: rgba(110, 88, 170, 1);
	/** 文本1 */
	font-size: 40rpx;
	font-weight: 400;
	letter-spacing: 0px;
	line-height: 52rpx;
	color: rgba(255, 255, 255, 1);
}
.big_logo{
	margin: 20rpx auto;
	width: 256rpx;
	height: 256rpx;
	opacity: 1;
	border-radius: 50%;
	background: rgba(110, 88, 170, 0.2);
}
.small_logo{
	width: 128rpx;
	height: 128rpx;
}
.content{
	/** 文本1 */
	font-size: 36rpx;
	font-weight: 400;
	letter-spacing: 0px;
	line-height: 42rpx;
	color: rgba(124, 124, 126, 1);


	margin: 35rpx 0rpx;
}
.flex{
	display: flex;
}
.layout{
	padding: 40rpx;
	background: rgba(110, 88, 170, 0.02);
	font-family: '优设标题黑';
}
.tips{
		height: 400rpx;
		opacity: 1;
		border-radius: 10rpx;
		/* background: rgba(185, 156, 255, 0.2); */
		/* border: 1px solid rgba(121, 72, 234, 0.5); */
	}
.header {
  font-size: 70rpx;
  font-weight: 900;
  letter-spacing: 0px;
  line-height: 80.06rpx;
  width: 350rpx;
  border-bottom: 8rpx solid rgba(121, 72, 234, 1);
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  font-family: '优设标题黑';
  background: linear-gradient(to bottom, rgba(121, 72, 234, 1), #c8b6f2);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.juzhong{
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
}
.title{
	width: 610rpx;
	/** 文本1 */
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 0px;
	line-height: 26.06px;
	color: rgba(121, 72, 234, 1);

}
</style>
